<template>
  <div style="padding-right: 20px;">
    <el-form label-width="90px">
      <el-form-item label="字段名称">
        <el-input placeholder="请输入字段名称" @blur="configChange" v-model="editingFieldDefinition.showName"/>
      </el-form-item>
<!--      <el-form-item label="字段别名">-->
<!--        <el-input placeholder="请输入字段别名" @blur="configChange" v-model="editingFieldDefinition.alias"/>-->
<!--      </el-form-item>-->
      <el-form-item label="数据库字段">
        <template v-slot:label>
          <el-popover
              placement="top-start"
              title="开发人员专用"
              :width="200"
              trigger="hover">
            <template #reference>
              数据库字段
            </template>
          </el-popover>
        </template>

        <el-input placeholder="请输入数据库字段" @blur="configChange" v-model="editingFieldDefinition.tableFieldName"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mergeObject} from '@/utils/CommonUtils';

let defaultConfig = {
  id: undefined,
  fieldName: undefined,
  showName: undefined,
  alias: undefined,
  inputType: 'text',
  component: 'textInput',
  tableFieldName: undefined,
}

export default {
  name: "TextInputConfiguration",
  props: {
    editingFieldDefinition: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(defaultConfig))
    },
  },
  data() {
    return {
      config: JSON.parse(JSON.stringify(defaultConfig))
    }
  },
  methods: {
    setData({fieldDefinition, selectedElement}) {
      this.config = fieldDefinition;
      this.initShowName = fieldDefinition.showName
    },
    configChange() {
      if(!this.config.showName || this.config.showName === '') this.config.showName = this.initShowName
      this.$emit('changeConfig', this.config)
    },
  }
};
</script>

<style scoped>

</style>
